function threeCanvas() {
  var SEPARATION = 80,
    AMOUNTX = 100,
    AMOUNTY = 100;
  var container;
  var camera, scene, renderer;
  var appId;
  var particles,
    particle,
    count = 0;
  var mouseX = 0,
    mouseY = 0;
  var windowHalfX = window.innerWidth / 2;
  var windowHalfY = window.innerHeight / 2;
  init();
  animate();
  function init() {
    container = document.getElementsByClassName("threeCanvas")[0];
    appId = document.getElementsByClassName('bodyt')[0];
    appId.appendChild(container);
    camera = new THREE.PerspectiveCamera(
      750,
      window.innerWidth / window.innerHeight,
      1,
      10000
    );
    camera.position.z = 3000;   //整体波浪的大小
    scene = new THREE.Scene();
    particles = new Array();
    var PI2 = Math.PI * 2;
    var material = new THREE.ParticleCanvasMaterial({
      color: 0xffffff,
      program: function (context) {
        context.beginPath();
        context.arc(0, 0, 1, 0, PI2, true);
        context.fill();
      }
    });
    var i = 0;
    for (var ix = 0; ix < AMOUNTX; ix++) {
      for (var iy = 0; iy < AMOUNTY; iy++) {
        particle = particles[i++] = new THREE.Particle(material);
        particle.position.x = ix * SEPARATION - AMOUNTX * SEPARATION / 6;
        particle.position.z = iy * SEPARATION - AMOUNTY * SEPARATION / 6;
        scene.add(particle);
      }
    }
    renderer = new THREE.CanvasRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    container.appendChild(renderer.domElement);
    window.addEventListener("resize", onWindowResize, false);
  }
  function onWindowResize() {
    windowHalfX = window.innerWidth / 2;
    windowHalfY = window.innerHeight / 2;
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
  }
  function animate() {
    requestAnimationFrame(animate);
    render();
  }
  function render() {
    // camera.position.x += (mouseX - camera.position.x) * 0.05; //x轴位置
    camera.position.x = 3000;
    camera.position.y = 1200; //y轴位置
    camera.lookAt(scene.position);
    var i = 0;
    for (var ix = 0; ix < AMOUNTX; ix++) {
      for (var iy = 0; iy < AMOUNTY; iy++) {
        particle = particles[i++];
        particle.position.y =
          Math.sin((ix + count) * 0.3) * 50 +   //波浪起伏的高度
          Math.sin((iy + count) * 0.5) * 50;     
        particle.scale.x = particle.scale.y =
          (Math.sin((ix + count) * 0.3) + 1) * 1.3 +
          (Math.sin((iy + count) * 0.5) + 1) * 1.3;
      }
    }
    renderer.render(scene, camera);
    count += 0.05;  //运动速度
  }
}

export { threeCanvas }
